<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>行政区划</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=715df321d5c3705775b73405aff8afcb&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style type="text/css">
        .info {
            position: absolute;
            top: 15px;
            left: 80px;
            right: 160px;
        }
        
        .lay_check_b {
            margin-bottom: 10px;
        }
    </style>

    <body>
        <div style="position:absolute;height:100%;width:100%;">
            <div id='container'></div>
            <div id="tip"></div>
        </div>
        <div class="info">
            <form class="layui-form" action="">
                <input type="checkbox" name="" title="北京市">
                <input type="checkbox" name="" title="东城区">
                <input type="checkbox" name="" title="西城区">
                <input type="checkbox" name="" title="朝阳区">
                <input type="checkbox" name="" title="丰台区">
                <input type="checkbox" name="" title="石景山">
                <input type="checkbox" name="" title="海淀区">
                <input type="checkbox" name="" title="顺义区">
                <input type="checkbox" name="" title="通州区">
                <input type="checkbox" name="" title="大兴区">
                <input type="checkbox" name="" title="房山区">
                <input type="checkbox" name="" title="门头沟">
                <input type="checkbox" name="" title="昌平区">
                <input type="checkbox" name="" title="平谷区">
                <input type="checkbox" name="" title="密云区">
                <input type="checkbox" name="" title="怀柔区">
                <input type="checkbox" name="" title="延庆区">
            </form>
        </div>
        <script type="text/javascript">
            layui.use('form', function() {
                var form = layui.form;
                $('.layui-form div').addClass("lay_check_b");
                //监听提交
                form.on('checkbox', function(data) {
                    var a = data.elem,
                        name = a.title,
                        checked = a.checked;
                    for (var i = 0; i < districtarr.length; i++) {
                        var b = districtarr[i];
                        b.name === name ? (checked ? b.obj.setMap(map) : map.remove(b.obj)) : null;
                    }
                    if (!circleShow) {
                        circleShow = true;
                        // drawCircle();
                    }
                    return false;
                });
            });

            /*由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。*/
            var map, geolocation, districtarr = [],
                circleShow = false;
            //加载地图，调用浏览器定位服务
            map = new AMap.Map('container', {
                resizeEnable: true
            });
            map.plugin('AMap.Geolocation', function() {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位，默认:true
                    timeout: 10000, //超过10秒后停止定位，默认：无穷大
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    buttonPosition: 'RB'
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
            });
            AMap.event.addListener(map, 'zoomend', function() {
                var zoom = map.getZoom();
            });
            AMap.event.addListener(map, 'dragend', function() {
                var point = map.getCenter();
            });
            //解析定位结果
            function onComplete(data) {
                var str = ['定位成功'];
                str.push('经度：' + data.position.getLng());
                str.push('纬度：' + data.position.getLat());
                if (data.accuracy) {
                    str.push('精度：' + data.accuracy + ' 米');
                } //如为IP精确定位结果则没有精度信息
                str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                document.getElementById('tip').innerHTML = str.join('<br>');
                getData();
            }
            //解析定位错误信息
            function onError(data) {
                document.getElementById('tip').innerHTML = '定位失败';
            }

            function getData() {
                $.getJSON('json/amap/beijing.min.json', function(data) {
                    var a = data,
                        b = a.features,
                        len = b.length;

                    for (var i = 0; i < len; i++) {
                        var polygonArr = [];
                        var c = b[i],
                            name = c.properties.name,
                            type = c.geometry.type,
                            dstr = c.geometry.coordinates;
                        if (type === "Polygon") {
                            var darr = dstr.split(";");
                            for (var j = 0; j < darr.length; j++) {
                                var p = darr[j];
                                var pp = p.split(',');
                                polygonArr.push([pp[0], pp[1]]);

                            }
                            drawPolygon(polygonArr, name);
                        } else if (type === "MultPolygon") {
                            var arr = dstr.split("|");
                            for (var k = 0; k < arr.length; k++) {
                                var darr = arr[k].split(";");
                                polygonArr = [];
                                for (var jj = 0; jj < darr.length; jj++) {
                                    var p = darr[jj];
                                    var pp = p.split(',');
                                    polygonArr.push([pp[0], pp[1]]);

                                }
                                drawPolygon(polygonArr, name);
                            }
                        }
                    }
                });
            }

            function drawPolygon(arr, name) {
                var polygonArr = arr;
                var polygon = new AMap.Polygon({
                    path: polygonArr,
                    strokeColor: "#0064fc",
                    fillColor: "#0064fc",
                    strokeWeight: 2,
                    fillOpacity: 0.2,
                    strokeOpacity: 0.7,
                    strokeStyle: 'solid'
                }); //创建多边形
                districtarr.push({
                    name: name,
                    obj: polygon
                });
                // polygon.setMap(map); //增加多边形
            };
            getData();

            function drawCircle() {
                var pointStr = "116.397477,39.908692";
                var circle = new AMap.Circle({
                    center: [116.397477, 39.908692], // 圆心位置
                    radius: 10000, //半径
                    strokeColor: "#F33", //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 3, //线粗细度
                    fillColor: "#ee2200", //填充颜色
                    fillOpacity: 0.35 //填充透明度
                });
                circle.setMap(map);
                var _circleEditor = new AMap.CircleEditor(map, circle);
                _circleEditor.open();
            };
        </script>
    </body>

</html>